<template>
  <div class="bodyWeather">
    <div class="echartsView" v-loading="loading">
      <div
        ref="myLine"
        style="height: 100%;width: 200%; margin: 10px"
      ></div>
    </div>
  </div>
</template>

<script>
import 'lib-flexible'
import {weatherInfoForTreeHons} from "@/api/cityInfo";
import * as echarts from "echarts";
export default {
  name: "hourlyForecast",
  data(){
    return {
      futureWeatherList: [],
      chart: null,
      loading:false
    }
  },
  mounted() {
    this.getFutureWeather();
  },
  methods: {
    //获取未来24小时天气
    async getFutureWeather() {
      this.loading = true
      // let httpUrl = 'https://api.seniverse.com/v3/weather/hourly.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&hours=24'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.futureWeatherList = res.results[0].hourly
      // await this.setOptionsChar()
      let resJson = await weatherInfoForTreeHons({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      let res = JSON.parse(resJson.data);
      this.loading = false
      this.futureWeatherList = res.hourly;
      await this.setOptionsChar();
    },
    //24小时折线图
    setOptionsChar() {
      let that = this;
      let xAxData = [];
      let serData = [];
      this.futureWeatherList.forEach((item, index) => {
        const date = new Date(item.fxTime);
        const hours = date.getHours().toString().padStart(2, "0");
        const minutes = date.getMinutes().toString().padStart(2, "0");
        xAxData.push(`${hours}:${minutes}`);
        serData.push({
          value: Number(item.temp),
          text: `${Number(item.temp)}℃ ${item.text}`,
          position: index % 2 === 0 ? "top" : "bottom", // 偶数索引在上方，奇数索引在下方
        });
      });
      this.chart = echarts.init(this.$refs.myLine);
      let myChart = {
        title: {
          textStyle: {
            color: "rgba(255,255,255)",
            fontWeight: "normal",
            fontSize: "16px",
          },
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          formatter: function (data) {
            let tqQkText = that.futureWeatherList[data[0].dataIndex].text;
            let humidity = that.futureWeatherList[data[0].dataIndex].humidity;
            let windDir = that.futureWeatherList[data[0].dataIndex].windDir;
            let windSpeed = that.futureWeatherList[data[0].dataIndex].windSpeed;
            return (
              data[0].axisValue +
              "<br/>" +
              tqQkText +
              "" +
              data[0].value +
              "℃<br/>相对湿度:" +
              humidity +
              "%<br/>" +
              windDir +
              windSpeed +
              "km/h"
            );
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxData,
          axisLabel: {
            // X轴线 标签修改
            textStyle: {
              color: "#fafafa", //坐标值得具体的颜色
            },
            margin: 30, // 增加这个属性来设置标签与坐标轴的距离
          },
          axisLine: {
            show: true, // X轴 网格线 颜色类型的修改
            lineStyle: {
              color: "#d3d3d3",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#707070",
              type: "dashed",
            },
          },
        },
        yAxis: {
          show: false,
          type: "value",
          splitLine: {
            show: false,
          },
        },
        grid: [
          {
            top: "5%",
            left: "5%",
            right: "3%",
            height: "70%",
          },
        ],
        series: [
          {
            data: serData.map((item) => ({
              value: item.value,
              label: {
                show: true,
                formatter: function (params) {
                  return serData[params.dataIndex].text;
                },
                position: item.position, // 使用动态位置
                textStyle: {
                  color: "#fff",
                },
              },
            })),
            type: "line",
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                color: "#6C91FB",
                borderWidth: 2,
                lineStyle: {
                  color: "#6C91FB",
                },
              },
            },
            areaStyle: {
              color: "rgba(255,255,255,0.5)",
            },
          },
        ],
      };
      this.chart.setOption(myChart);
    },
  }
}
</script>

<style lang="scss" scoped>
.bodyWeather{
  margin: 14px;
  border-radius: 10px;
  background-color: #9FC4FA;
}
.echartsView{
  overflow: auto;
  height: 210px
}
::-webkit-scrollbar{
  width: 0px;
  height: 0px;
}
scrollbar {
  width: 0px;
  height: 0px;
}
</style>
